<template>
    <div id='user'>
        <transition :name='routerAnim' :mode="routerMode">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive" class='router'></router-view>
            </keep-alive>
        </transition>
        <transition :name='routerAnim' :mode="routerMode">
            <router-view v-if="!$route.meta.keepAlive" class='router'></router-view>
        </transition>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import checkBox from '../components/CheckBox.vue'
    import { getOS } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setSessionId',
                'localInfo'
            ]),
            currentRouter(item){
                let routerArr = this.$route.matched
                let matchRouter = _.some(routerArr,['name',item.router])
                return matchRouter
            },
            goRouter(item,isSub){
                let thisRouter
                let routers = item.subRouters

                if(isSub === 'sub'){
                    if(this.$route.name == item) return
                    this.$router.push(item)
                    return
                }

                if(routers.length > 1){
                    item.opened = !item.opened
                    return
                }

                thisRouter = routers[0]
                if(this.$route.name == thisRouter.name) return
                this.$router.push(thisRouter)
            },
            goLogin(){
                this.setSessionId('')
                this.$router.push({
                    name:'login'
                })
            }
        },
        data() {
            return {
                isWeb:process.env.NODE_ENV == 'web',
                os:getOS(),
                placeholder:'--',
                showModal:false,
                selectBox:'大雨',
                radioBox:'123',
                checkBox:true,
                sideBarList:[[{
                    text:'用户',
                    router:'user',
                    opened:false,
                    subRouters:[{
                        name:'user-index'
                    }],
                    iconClass:'icon-user'
                },{
                    text:'订单',
                    router:'order',
                    opened:false,
                    subRouters:[{
                        name:'order-index'
                    }],
                    iconClass:'icon-evaluate'
                },{
                    text:'交易分析',
                    router:'transaction',
                    opened:false,
                    subRouters:[{
                        name:'transaction-analysis'
                    }],
                    iconClass:'icon-statistics'
                },{
                    text:'贷款导流',
                    router:'loan',
                    opened:true,
                    subRouters:[{
                        name:'loan-index',
                    }],
                    iconClass:'icon-finance'
                }]]
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo',
            ]),
            admin(){
                return this.localInfo.admin
            },
            sessionId(){
                return this.localInfo.sessionId
            },
            needLogin(){
                return this.localInfo.needLogin
            },
            routerAnimation(){
                return this.localInfo.routerAnimation
            },
            routerAnim(){
                if(this.os == 'Android'){
                    return ''
                }
                if(this.os != 'Android'){
                    return this.routerAnimation
                }
            },
            routerMode(){
                if(this.os == 'Android'){
                    return 'out-in'
                }
                if(this.os != 'Android'){
                    return ''
                }
            }
        },
        created(){
            // this.setMsgTipStyle({ top:'100px' })
        },
        watch: {
            'needLogin'(newVal,oldVal){
                if(newVal == oldVal) return
                if(newVal === true)
                this.$router.replace({
                    name:'login'
                })
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .user-loan-detail{
        position: relative;
        .wrapper{
            padding-top: 71px;
        }
        .header{
            display: flex;
            background-color: #fff;
            position: absolute;
            top:0;
            left:0;
            right:0;
            z-index:2;
        }
        .header__item{
            width: 20%;
            flex:1;
            text-align: center;
            padding: 14px 0 10px 0;
            position: relative;
            border-bottom: 1px solid $sectionColor;
            p{
                @extend %font-subhead;
                color:$importColor;
                font-size: 16px;
            }
            span{
                @extend %font-caption;
                display: block;
                font-size: 12px;
            }
            &:after{
                content:'';
                position: absolute;
                bottom:0;
                left:0;
                right:0;
                border-top:2px solid $orange;
                transform:scale(0);
                transition:transform ease 150ms;
            }
            &:active,&.active{
                &:after{
                    transform:scale(1);
                }
                p{
                    color:$orange;
                }
                color:$orange;
            }
            &.purple{
                &:after{
                    border-color:$purple;
                }
                &:active,&.active{
                    color:$purple;
                    p{
                        color:$purple;
                    }
                    color:$purple;
                }
            }
        }
        .main{
            padding-top: 16px;
            .user-list-explain{
                padding-top: 0;
            }
        }
    }
    .user-list-explain{
        @extend %font-caption;
        text-align: center;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .user-tab{
        display: flex;
        background-color: #fff;
    }
    .user-tab__item{
        flex:1;
        text-align: center;
        padding:10px 0 8px 0;
        position: relative;
        &:after{
            content:'';
            transition:ease 150ms transform;
            transform:scale(0);
            border-top:2px solid $orange;
            position: absolute;
            bottom:0;
            left:16px;
            right:16px;
        }
        &:active,&.active{
            &:after{
                transform:scale(1);
            }
        }
        .title{
            @extend %font-title;
            color:$importColor;
        }
        .money{
            @extend %font-caption;
        }
    }
    .user-table{
        text-align: center;
    }
    .user-table__item{
        @extend %font-caption;
        color:$importColor;
        background-color: #fff;
        &.head{
            color:$defaultColor;
            font-weight: 400;
            background-color: transparent;
        }
        &.off{
            color:$defaultColor;
        }
        display: flex;
        padding: 0 24px;
        border-top:1px solid $sectionColor;
    }
    .user-table__value{
        width: 20%;
        flex:1;
        box-sizing:border-box;
        padding: 14px 0 14px 0;
        &:first-child{
            padding-left: 0;
        }
    }
    .menu__button{
        position: relative;
        &:before{
            content:'';
            border-top:1px solid $sectionColor;
            position: absolute;
            top:0;
            left:16px;
            right:16px;
        }
    }
    .next-step{
        @extend %font-button;
        color:$importColor;
        font-weight:normal;
        text-align: center;
        padding:16px 24px;

    }
</style>
